<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <!-- 什么是组件? 什么是组件化思维？ -->
        <!-- 把问题进行拆解吗，如果能将一个复杂的问题拆解成很多个可以处理的小问题，再将其放在整体中，这些问题可以快去解决 -->
        <!-- 组件化是vue重要的一种思维方式 -->

        <!-- <p>{{msg}}</p> -->

        <!-- 第三步：使用组件,必须在vue实例范围内 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>


    </div>
    <!-- <my-cpn></my-cpn>不起效果 -->
    <!-- 组件树
    <组件1>
        <组件2>
            <组件4>

            </组件4>
        </组件2>
        <组件3>

        </组件3>
    </组件1> -->
    
    <script>
        //注册组件的基本步骤
        //组件的使用分成三个步骤
        //第一步：创建组件构成器 Vue.extends() extends继承
        //调用创建构造器函数，传入

        const cpnConstructor = Vue.extend({
            //键值对
            template:`    
            <div>       
                <h2>组件中的标题</h2>
                <p>组件中的内容</p>
                <button>button<tton>
            </div>
            `
        })
        //es6
        // class Person{}

        //class Boy extends Person{

        //}

        //第二部：注册组件 Vue.component()
        Vue.component('my-cpn'/*组件标签名*/,cpnConstructor/*组件构造器实例*/)

        let app = new Vue({
            el:"#app",    
            data:{         
                msg:"hello world"
            }
        })
    </script>
</body>
<html>